Quasar.lang.set(Quasar.lang.zhHans);

var appVM = new Vue({
    el: '#q-app',
    data: function() {
        return {
            memberMobile: '',
            collectionName: '',
            bizMode: '',
            bizModeDictItems: [],
            stateDictItems: [],
            state: '',
            timeStart: dayjs().format('YYYY-MM-DD'),
            timeEnd: dayjs().format('YYYY-MM-DD'),
            tableDataLoading: false,
            tablePagination: {
                page: 1,
                rowsPerPage: 10,
                rowsNumber: 10
            },
            tableColumns: [
                { name: 'member_info', label: '会员信息', align: 'left' },
                { name: 'collection_info', label: '商品信息', align: 'left' },
                { name: 'pay_biz', label: '支付业务', align: 'left' },
                { name: 'stateName', label: '状态', field: 'stateName', align: 'left' },
                { name: 'amount', label: '金额', field: 'amount', align: 'left' },
                { name: 'cashbackAmount', label: '返现金额', field: 'cashbackAmount', align: 'left' },
                { name: 'cashbackStatus', label: '返现状态', field: 'cashbackStatus', align: 'left' },
                { name: 'deliveryStatus', label: '发货状态', field: 'deliveryStatus', align: 'left' },
                { name: 'expressNumber', label: '快递单号', field: 'expressNumber', align: 'left' },
                { name: 'logisticsCompany', label: '物流公司', field: 'logisticsCompany', align: 'left' },
                { name: 'time_info', label: '时间', align: 'left' },
                { name: 'action', label: '操作', align: 'center' }
            ],
            tableData: [],
            expressDetails: [],
            logisticsCompanies: [],
            selectedLogisticsCompany: null,
            expressNumber: '',
            currentOrderId: null
        };
    },
    mounted: function() {
        var that = this;
        that.findStateDictItem();
        that.findBizModeDictItem();
        that.loadTableData({
            pagination: this.tablePagination
        });
        that.getLogisticsCompanies();
        new ClipboardJS('.copy-btn', {
            text: function(trigger) {
                return trigger.getAttribute('data-clipboard-text');
            }
        }).on('success', function(e) {
            that.$q.notify({
                type: 'positive',
                message: '复制成功'
            });
        });
    },
    methods: {
        findStateDictItem: function() {
            var that = this;
            that.$http.get('/dictconfig/findDictItemInCache', {
                params: {
                    dictTypeCode: 'payOrderState'
                }
            }).then(function(res) {
                that.stateDictItems = res.body.data;
            });
        },

        findBizModeDictItem: function() {
            var that = this;
            that.$http.get('/dictconfig/findDictItemInCache', {
                params: {
                    dictTypeCode: 'payOrderBizMode'
                }
            }).then(function(res) {
                that.bizModeDictItems = res.body.data;
            });
        },

        viewImage: function(imagePath) {
            var image = new Image();
            image.src = imagePath;
            var viewer = new Viewer(image, {
                hidden: function() {
                    viewer.destroy();
                }
            });
            viewer.show();
        },

        refreshTable: function() {
            this.loadTableData({
                pagination: {
                    page: 1,
                    rowsPerPage: this.tablePagination.rowsPerPage,
                    rowsNumber: 10
                }
            });
        },

        loadTableData: function(param) {
            var that = this;
            that.tableDataLoading = true;
            that.$http.get('/payOrder/findPayOrderByPage', {
                params: {
                    pageSize: param.pagination.rowsPerPage,
                    pageNum: param.pagination.page,
                    memberMobile: that.memberMobile,
                    collectionName: that.collectionName,
                    bizMode: that.bizMode,
                    state: that.state,
                    createTimeStart: that.timeStart ? that.timeStart + ' 00:00:00' : '',
                    createTimeEnd: that.timeEnd ? that.timeEnd + ' 23:59:59' : ''
                }
            }).then(function(res) {
                var data = res.body.data;
                that.tablePagination.rowsNumber = data.total;
                that.tableData = data.content;
                that.tablePagination.page = param.pagination.page;
                that.tablePagination.rowsPerPage = param.pagination.rowsPerPage;
                that.tableDataLoading = false;
            });
        },

        getExpressDetails: function(expressNumber) {
            var that = this;
            that.$http.get('/logistics/getExpressDetails', {
                params: {
                    expressNumber: expressNumber
                }
            }).then(function(res) {
                that.expressDetails = res.body.data;
                document.getElementById('logisticsModal').style.display = 'block';
            });
        },

        closeLogisticsModal: function() {
            document.getElementById('logisticsModal').style.display = 'none';
        },

        showShippingModal: function(orderId) {
            this.currentOrderId = orderId;
            document.getElementById('shippingModal').style.display = 'block';
        },

        closeShippingModal: function() {
            document.getElementById('shippingModal').style.display = 'none';
            this.selectedLogisticsCompany = null;
            this.expressNumber = '';
        },

        getLogisticsCompanies: function () {
            var that = this;
            that.$http.get('/dictconfig/findDictItemInCache', {
                params: {
                    dictTypeCode: 'companyCode'
                }
            }).then(function (res) {
                that.logisticsCompanies = res.body.data;
            });
        },
        submitShipping: function() {
            var that = this;
            if (!that.selectedLogisticsCompany || !that.expressNumber) {
                that.$q.notify({
                    type: 'negative',
                    message: '请填写完整信息'
                });
                return;
            }
            that.$http.post('/payOrder/submitShipping', {
                orderId: that.currentOrderId,
                logisticsCompany: that.selectedLogisticsCompany,
                expressNumber: that.expressNumber
            }).then(function(res) {
                if (res.body.success) {
                    that.$q.notify({
                        type: 'positive',
                        message: '发货成功'
                    });
                    that.closeShippingModal();
                    that.refreshTable();
                } else {
                    that.$q.notify({
                        type: 'negative',
                        message: res.body.message
                    });
                }
            });
        }
    }
});